import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Typography, Card, Row, Col, Button } from 'antd';
import {
  FileAddOutlined,
  DatabaseOutlined,
  CloudUploadOutlined,
  MonitorOutlined,
  SafetyCertificateOutlined,
} from '@ant-design/icons';

const { Title, Text } = Typography;

const CertificateHome: React.FC = () => {
  const navigate = useNavigate();

  // 服务卡片数据
  const serviceCards = [
    {
      title: '申请免费SSL证书',
      description: '1分钟快申请',
      buttonText: '立即申请',
      providers: ['支持阿里云、腾讯云、ZeroSSL、Let\'s Encrypt、Google'],
      color: '#4285f4',
      icon: <FileAddOutlined style={{ fontSize: 24, color: '#4285f4' }} />,
      action: () => navigate('/app/certificates/apply')
    },
    {
      title: '证书管理',
      description: '管理所有SSL证书',
      buttonText: '查看管理',
      providers: ['支持证书查看、续期、删除等操作'],
      color: '#52c41a',
      icon: <DatabaseOutlined style={{ fontSize: 24, color: '#52c41a' }} />,
      action: () => navigate('/app/certificates/manage')
    },
    {
      title: '证书部署',
      description: '自动部署SSL证书',
      buttonText: '立即部署',
      providers: ['支持阿里云、腾讯云、又拍云、七牛云、华为云等'],
      color: '#722ed1',
      icon: <CloudUploadOutlined style={{ fontSize: 24, color: '#722ed1' }} />,
      action: () => navigate('/app/certificates/deploy')
    },
    {
      title: '证书监控',
      description: '实时监控证书状态',
      buttonText: '查看监控',
      providers: ['证书过期提醒、健康检查、状态监控'],
      color: '#fa8c16',
      icon: <MonitorOutlined style={{ fontSize: 24, color: '#fa8c16' }} />,
      action: () => navigate('/app/certificates/monitor')
    },
  ];

  return (
    <div>
      {/* 欢迎信息 */}
      <div style={{ marginBottom: '32px' }}>
        <Title level={3} style={{ margin: 0, marginBottom: '8px', display: 'flex', alignItems: 'center' }}>
          <SafetyCertificateOutlined style={{ marginRight: '12px', color: '#1890ff' }} />
          SSL证书管理中心
        </Title>
        <Text type="secondary" style={{ fontSize: '16px' }}>
          让SSL证书申请部署更简单，从此不再为证书过期而烦恼。
        </Text>
      </div>

      {/* 服务卡片网格 */}
      <Row gutter={[24, 24]}>
        {serviceCards.map((card, index) => (
          <Col xs={24} sm={12} lg={12} xl={6} key={index}>
            <Card
              style={{
                height: '220px',
                borderRadius: '12px',
                border: '1px solid #e8e8f0',
                background: 'linear-gradient(135deg, #f8faff 0%, #ffffff 100%)',
                transition: 'all 0.3s ease'
              }}
              bodyStyle={{
                padding: '24px',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-between'
              }}
              hoverable
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-2px)';
                e.currentTarget.style.boxShadow = '0 8px 24px rgba(64, 133, 244, 0.12)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.06)';
              }}
            >
              <div>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
                  {card.icon}
                  <Title level={4} style={{ margin: 0, marginLeft: '12px', fontSize: '18px' }}>
                    {card.title}
                  </Title>
                </div>
                <Text style={{ 
                  color: '#666', 
                  fontSize: '14px', 
                  display: 'block',
                  marginBottom: '16px'
                }}>
                  {card.description}
                </Text>
                
                <Button
                  type="primary"
                  style={{
                    width: '100%',
                    height: '40px',
                    borderRadius: '8px',
                    fontSize: '14px',
                    fontWeight: 500,
                    background: card.color,
                    borderColor: card.color,
                    marginBottom: '16px'
                  }}
                  onClick={card.action}
                >
                  {card.buttonText}
                </Button>
              </div>
              
              <Text 
                type="secondary" 
                style={{ 
                  fontSize: '12px',
                  lineHeight: '18px',
                  display: 'block'
                }}
              >
                {card.providers.join('，')}
              </Text>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default CertificateHome; 